<template>
  <div style="height: 100vh; background-color:black">
    <div style="color: green">
      <span>监控数：</span>
      <input type="text" v-model="machineCount">
    </div>

    <div style="color:green">
      <table>
        <thead>
        <tr>
          <th v-for="(header, index) in tableHeaders" :key="index">{{ header }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(student, studentIndex) in tableData" :key="studentIndex">
          <td v-for="(score, scoreIndex) in student.scores" :key="scoreIndex">{{ score }}</td>
        </tr>
        </tbody>
      </table>
    </div>


  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import axios from "axios";

const machineCount = ref(0)

const tableHeaders = ref([]);
const tableData = ref([]);


const initPage = () => {
  tableHeaders.value = ["语文", "数学", "英语"];
  tableData.value = [
    {
      name: "小明",
      scores: [80, 90, 85]
    },
    {
      name: "小红",
      scores: [88, 92, 78]
    }
  ];

  let jwt = localStorage.getItem("jwt");
  axios.get('http://127.0.0.1:8000/monitor/', {
    headers: {
      AUTHORIZATION: "Bearer " + jwt
    }
  })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        if (error.response.status === 401 || error.response.status === 403) {
          // 清除本地存储的token
          localStorage.removeItem('jwt');
          // 重定向到登录页面
          window.location.href = '/login';
        }
        console.error(error);
      });
}

onMounted(initPage);

</script>